যখন একটি ব্রাউজার কোন স্টাইল শীট পড়ে, তখন ইহা স্টাইল শীটে দেওয়া কমান্ড অনুসারে এইচটিএমএল ডকুমেন্টের স্টাইল/গঠন পরিবর্তন করে।

সিএসএস ব্যবহারের পদ্ধতি

এইচটিএমএল ডকুমেন্টকে স্টাইল করার জন্য তিনটি উপায় রয়েছেঃ

• ইনলাইন(inline) স্টাইল
• ইন্টারনাল(internal) স্টাইল
• এক্সটার্নাল(external) স্টাইল

ইনলাইন স্টাইল

আপনি যদি আপনার সাইটের কোনো একটি পেজের শুধুমাত্র একটি এলিমেন্ট/ট্যাগকে অর্থাৎ কোনো নির্দিষ্ট অংশকে ভিন্ন ভাবে উপস্থাপন করতে চান তাহলে ইনলাইন স্টাইল ব্যবহার করতে পারেন।

এলিমেন্টকে ইনলাইন স্টাইল করার জন্য ঐ এলিমেন্টের মধ্যে style এট্রিবিউট যুক্ত করতে হয় যা যেকোনো সিএসএস property:value ধারন করতে পারে।

নিচের উদাহরণে ইনলাইন স্টাইলের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=187

পরামর্শঃ ইনলাইন স্টাইল ব্যবহার থেকে বিরত থাকাই ভালো, ইহা আপনার কোডের মধ্যে বিশৃংখলা সৃষ্টি করবে, দেখতে অসুন্দর হবে। তাই এক্সটার্নাল স্টাইল শীট ব্যবহার করাই উত্তম।

ইন্টারনাল স্টাইল

আপনি যদি আপনার সাইটের শুধুমাত্র একটি পেজকে ভিন্ন ভাবে উপস্থাপন করতে চান তাহলে ইন্টারনাল স্টাইল শীট ব্যবহার করতে পারেন।

এইচটিএমএল পেজের < head> সেকশনে < style> ট্যাগের মধ্যে ইন্টারনাল স্টাইলের কোড লিখতে হয়। নিচে উদাহরণের মাধ্যমে বিষয়টি দেখানো হলোঃ

kt_satt_skill_example_id=198

এক্সটার্নাল স্টাইল

আপনি যদি আপনার সাইটের সবগুলো পেজের স্টাইল একই রকম এবং একই সাথে পরিবর্তন করতে চান তাহলে এক্সটার্নাল স্টাইল শীট ব্যবহার করুন।

কেননা এক্সটার্নাল স্টাইল শীট ব্যবহার করে শুধুমাত্র একটি ফাইল পরিবর্তনের মাধ্যমে আপনি সম্পূর্ণ ওয়েব সাইটের চেহারা পরিবর্তন করে দিতে পারবেন।

এইচটিএমএল পেজের সাথে এক্সটার্নাল স্টাইল শীট সংযুক্ত করার জন্য < link> এলিমেন্টটি ব্যবহার করতে হয় এবং < link> ট্যাগটি < head> সেকশন এর মধ্যে রাখতে হয়।

kt_satt_skill_example_id=200

যেকোন টেক্সট এডিটরে এক্সটার্নাল স্টাইল শীট লেখা যায় এবং এই এক্সটার্নাল স্টাইল ফাইলে এইচটিএমএল ট্যাগ ব্যবহার করা যায় না। স্টাইল শীট ফাইলটি অবশ্যই .css এক্সটেনশন দিয়ে সংরক্ষন করতে হয়।

এখানে "style.css" কেমন হবে তা দেখানো হলোঃ

h2{
 color:blue;
}
p{
 color:white;
}
body{
 background-color: #DA90DA;
}

বিঃদ্রঃ প্রোপার্টির ভ্যালু এবং এর এককের মধ্যে কোনো স্পেস/ফাঁকা রাখবেন না। যেমনঃ margin-left: 30 px; করা যাবে না। সঠিক পদ্ধতি হলোঃ margin-left: 30px;

বহুমূখী স্টাইল শীট

একই এলিমেন্টকে স্টাইল করার জন্য যদি বিভিন্ন স্টাইল শীটের মধ্যে একই প্রোপার্টির বিভিন্ন ভ্যালু ব্যবহার করি তাহলে ব্রাউজার সবশেষে পঠিত ভ্যালুটি স্টাইল করার কাজে ব্যবহার করে।

উদাহরণ

ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য এক্সটার্নাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ

h2 {
 color: blue;
}

আবার ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য ইন্টারনাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ

h2 {
 color: green;
}

যদি এক্সটার্নাল স্টাইলের link ট্যাগের পরে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "green" হবে।

kt_satt_skill_example_id=201

তবে, যদি এক্সটার্নাল স্টাইলের পূর্বে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "blue" হবে।

kt_satt_skill_example_id=205

স্টাইলের ক্রম

একটি ওয়েবসাইটে কোন একটি এইচটিএমএল এলিমেন্টের জন্য একের অধিক স্টাইল শীট থাকলে কোন স্টাইলটি ব্যবহৃত হবে?

এইচটিএমএলে ব্যবহৃত স্টাইল শীটসমূহের অগ্রাধিকার ক্রমানুসারে নিম্নে তুলে ধরা হলোঃ

1. ইনলাইন স্টাইল(এইচটিএমএল এলিমেন্টের মধ্যে)
2. এক্সটার্নাল এবং ইন্টারনাল স্টাইল শীট(হেড সেকশন এর মধ্যে)
3. ব্রাউজার ডিফল্ট

সুতরাং, ইনলাইন স্টাইল শীটের অগ্রাধিকার সবচেয়ে বেশি। অর্থাৎ ইহা < head> ট্যাগের মধ্যে ব্যবহৃত ইন্টারনাল এবং এক্সটার্নাল স্টাইল শীট অথবা ব্রাউজারের ডিফল্ট ভ্যালুকে পরিবর্তন করতে পারে।

kt_satt_skill_example_id=207